<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>苹果、安卓效率基本相同:biob自动播放（双端可行）</title>
</head>

<body>
  <input type="file" accept="video/*" capture=camcorder" value="上传" onchange="show(this)">

  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

  <script>
    var videoSrc = null;
    var video = document.createElement("video");
    let canvas = document.createElement("canvas");

    function show(el) {
      //拿到视频文件后转换成biobUrl路径
      var videoSrc = window.URL.createObjectURL(el.files.item(0));
      //设置video参数开始准备播放
      video.src = videoSrc;
      video.width = 1080;
      video.height = 1920;
      video.muted = true;
      video.autoplay = true;
      video.preload = true;
      video.setAttribute("playsinline", "");
      video.setAttribute("webkit-playsinline", "");

      //视频播放要在Promise里面进行
      //当视频数据加载完毕时，我们需要先播放视频，从而实现视频截图，解决视频图片空白的问题；
      // console.log("window.WeixinJSBridge:",window.WeixinJSBridge)
      if (window.WeixinJSBridge) {
        //微信自带浏览器中走判断1
        console.log("判断1");
        WeixinJSBridge.invoke(
          "getNetworkType",
          {},
          function (e) {
            video.play();
          },
          false
        );
      } else {
        //非微信浏览器中走判断2
        console.log("判断2");
        // document.addEventListener(
        //   "WeixinJSBridgeReady",
        //   function () {
        //     WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
        video.play();
        //     });
        //   },
        //   false
        // );
      }
      // video.play();
      //拿到视频src开始播放后
      getVideoBase64(video.src, video, canvas);
    }

    function getVideoBase64(url, video, canvas) {
      return new Promise((resovle) => {
        let dataUrl = "";

        video.onloadeddata = function () {
          setTimeout(() => {
            //设置定时器，播放10ms后,停止播放，然后用canvas生成图片；
            video.pause();
            let multiple = 0.3;
            canvas.width = video.width * multiple;
            canvas.height = video.height * multiple;
            let ctx = canvas.getContext("2d");
            ctx.drawImage(
              video,
              0,
              0,
              video.width * multiple,
              video.height * multiple
            );
            dataUrl = canvas.toDataURL("image/png");
            let img = new Image();
            img.src = dataUrl;
            //   img.width = 100;
            //   img.height = 100;
            img.style = "border:1px solid red";
            //   document.querySelector("div").appendChild(img);
            document.body.appendChild(img);
            video.remove(); //删除创建的视频标签
            resovle(dataUrl);
          }, 10);
        };
      });
    }
  </script>
  <!-- 移动端调试控制台 -->
  <!-- <script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
  <script>
    eruda.init();
  </script> -->
</body>
</html>